<template>
  <div class="pie-5-wrapper">
    <VueHighChart
      :options="chartOptions"
    />
  
    <!-- <div class="glowing-base"></div> -->
   
  </div>
</template>

<script setup>
import { computed, ref } from "vue";
import VueHighChart from "@/components/VueHighChart.vue";

const props = defineProps({
  data: {
    type: Array,
    default: () => [
      { name: "1号线", y: 20, color: "#3EA5F0" },
      { name: "2号线", y: 6, color: "#D24BD7" },
      { name: "3号线", y: 14, color: "#83EA7F" },
      { name: "4号线", y: 23, color: "#8578FF" },
      { name: "5号线", y: 21, color: "#FFA858" },
      { name: "6号线", y: 32, color: "#00E0DB" },
      { name: "9号线", y: 12, color: "#DE9F58" },
      { name: "10号线", y: 11, color: "#DEBB58" },
      { name: "12号线", y: 6, color: "#A4E1FF" },
      { name: "18号线", y: 12, color: "#594BD7" },
      { name: "环线", y: 4, color: "#FAEF4A" },
      { name: "国博线", y: 4, color: "#9B95F5" },
      { name: "江跳线", y: 5, color: "#D24BD7" },
    ],
  },
});

//数据总量
const total = computed(() => {
  return props.data.reduce((sum, item) => sum + item.y, 0);
});

// Highcharts配置选项
const chartOptions = computed(() => ({
  chart: {
    type: "pie",
    options3d: {
      enabled: true,
      alpha: 55,
    },
    backgroundColor: "transparent",
    animation: false,
  },
  credits: {
    enabled: false,
  },
  legend: {
    enabled: false,
  },
  title: {
    text: "",
    show: false,
  },
  subtitle: {
    text: "",
    show: false,
  },
  plotOptions: {
    pie: {
      innerSize: 90,
      depth: 25,
      dataLabels: {
        enabled: false,
      },
    },
  },
  series: [
    {
      name: "",
      data: props.data.map((item) => ({
        name: item.name,
        y: item.y,
        color: item.color || "#000",
      })),
    },
  ],
}));
</script>

<style lang="scss" scoped>
.pie-5-wrapper{
  width: 100%;
  height: 100%;
  position: relative;
}
.glowing-base {
  position: absolute;
  bottom: 139px;
  left: 25%;
  width: 180px;
  height: 90px;
  background: transparent;
  border-radius: 50%;
  border: 5px solid;
  box-shadow: 0 0 15px rgba(0, 158, 255, 0.8), 0 0 40px rgba(0, 158, 255, 0.6);
  animation: glowAnimation 1.5s infinite alternate;
  transform: translateX(-50%);
  z-index: 0;
}

@keyframes glowAnimation {
  0% {
    box-shadow: 0 0 15px rgba(0, 158, 255, 0.8), 0 0 40px rgba(0, 158, 255, 0.6);
  }
  100% {
    box-shadow: 0 0 25px rgba(0, 158, 255, 1), 0 0 60px rgba(0, 158, 255, 0.8);
  }
}
</style>
